<script setup lang="ts">
import { onMounted, ref } from "vue";
import portService from "@/apis";
import projectDialog from "./components/dialog.vue";
import { $confirm, $singleMsg } from "xt-public/plugins/utils/element.js";
import type Typings from "@/typings";

const dialogRef = ref();
// 弹窗控制器
const dialogControll = {
  async open(
    row: Typings.Project.props | {},
    type: Typings.Project.handleType = "check"
  ) {
    return dialogRef.value.open(row, type);
  },
};

const tableData = ref<Typings.Project.props[]>([]);
const loading = ref<boolean>(false);
// 表格控制器
const controller = {
  // 初始化
  init() {
    controller.getList();
  },
  // 列表数据
  async getList() {
    try {
      loading.value = true;
      const { data } = await portService.projectListApi({});
      tableData.value = data;
    } finally {
      loading.value = false;
    }
  },

  // 新增项目 | 添加系统 | 编辑 | 查看
  async handleDetail(
    row: Typings.Project.props | {},
    type: Typings.Project.handleType = "check"
  ) {
    await dialogControll.open(row, type);
    controller.getList();
  },

  // 删除
  async handleDelete(row: Typings.Project.scope["row"]) {
    await $confirm({ tip: "确定要删除该数据" });
    await portService.projectRemoveApi({ id: row.id });
    $singleMsg({ type: "success", message: "删除成功" });
    controller.getList();
  },
};

onMounted(() => {
  controller.init();
});
</script>

<template>
  <div class="project-list-container h-full flex flex-col">
    <div class="btn-container leading-[30px] text-right">
      <xt-link @click="controller.handleDetail({}, 'create')">添加项目</xt-link>
    </div>
    <div class="flex-1 h-0">
      <xt-table :data="tableData" height="100%" v-loading="loading">
        <xt-table-column label="名称" prop="name">
          <template #default="{ row }">
            <xt-tag :type="row.children?.length ? 'primary' : 'success'">{{
              row.name
            }}</xt-tag>
          </template>
        </xt-table-column>
        <xt-table-column label="代码" prop="code">
          <template #default="{ row }">
            <xt-link :type="row.children?.length ? 'primary' : 'success'">{{
              row.code
            }}</xt-link>
          </template>
        </xt-table-column>
        <xt-table-column label="操作">
          <template #default="{ row }">
            <xt-link
              class="mx-[8px]"
              v-if="!row.parentId"
              @click="controller.handleDetail(row, 'createSystem')"
              >添加系统</xt-link
            >
            <xt-link
              class="mx-[8px]"
              @click="controller.handleDetail(row, 'edit')"
              >编辑</xt-link
            >
            <xt-link
              class="mx-[8px]"
              @click="controller.handleDetail(row, 'check')"
              >查看</xt-link
            >
            <xt-link
              class="mx-[8px]"
              type="danger"
              @click="controller.handleDelete(row)"
              >删除</xt-link
            >
          </template>
        </xt-table-column>
      </xt-table>
    </div>
    <project-dialog ref="dialogRef" />
  </div>
</template>
